<template>
    <div class="px-4 py-2">
        <var-card class="text-left flex">
            <template #description >
                <div class="w-2">
                    <var-form class="m-2">
                        <var-space direction="column">
                            <var-input placeholder="初始密码" readonly v-model="formData.value2" />
                            <var-input placeholder="新设密码" :rules="[(v) => v.length >= 6 || '文本长度必须大于等于6']"
                                v-model="formData.newpassword" />
                        </var-space>
                    </var-form>
                </div>
                <div class="text-right mr-2 w-2">
                    <var-button type="primary" @click="editPassword()">
                        保存修改
                    </var-button>
                </div>
            </template>
        </var-card>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { loginStore } from "@/store/user";
import { postData } from "@/utils/api";
const store = loginStore();
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
    user = store.getUserInfo;
} else {
    user = JSON.parse(store.getUserInfo?.userInfo);
}
const formData = reactive({
    newpassword: "",
    value2: user.password
});

const editPassword = async () => {
    console.log(formData.newpassword)
    console.log(user)
    await postData("student/updatePwd", {
        id: user.id,
        password: formData.newpassword
    }).then((res) => {
        const { data } = res;
        if (data.code == 0) {
            Snackbar.success({
                content: data.msg,
                position: 'bottom'
            })
        } else {
            Snackbar.error({
                content: data.msg,
                position: 'bottom'
            })
        }
        store.addUser(data.data)
    });
}

</script>

<style scoped>
:deep(.var-input__line) {
    background: #3a7afe;
}
:deep(.var-card__container){
    display: flex;
    justify-content: center;
    align-items: center;
}
:deep(.var-input__input){
  font-size: 8px;
}
:deep(.var-radio__text){
    font-size: 8px;
}
</style>